<!DOCTYPE html>
<html lang="en"
      style="--blur:6px; --color1:#a7cee0; --color2:#d0dea7; --text-color:rgb(255, 255, 255, calc(var(--opacity)*3));">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>注册</title>
    <script src="asserts/js/jquery-3.6.0.js"></script>
    <script src="asserts/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="asserts/bootstrap-3.4.1-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="asserts/bootstrap-3.4.1-dist/css/bootstrap-theme.css"/>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            height: 100%;
        }

        .bg {
            margin: 0 auto;
            border: 1px solid #F00
        }

        .bar {
            /*margin-top: 150px;*/
        }

        .card {
            margin: 0 auto;
            width: 700px;
            padding-left: 50px;
            padding-right: 50px;
            padding-top: 40px;
            padding-bottom: 20px;
            background-color: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            border: 1px solid rgba(255, 255, 255, 0.18);
            box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
            -webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
            border-radius: 12px;
            -webkit-border-radius: 12px;
            color: rgba(255, 255, 255, 0.75);
        }

        #workspace-div {
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: row;
            background: linear-gradient(135deg, var(--color1) 50%, var(--color2));
        }

        #circle-org {
            width: 300px;
            height: 300px;

            border-radius: 50%;
            margin-top: -230px;
            margin-right: -180px;
            background: linear-gradient(135deg, #ffb566, #ff6677);
        }

        #circle-blue {
            width: 175px;
            height: 175px;
            border-radius: 50%;
            margin-top: 225px;
            margin-left: -90px;
            background: linear-gradient(135deg, #de82ca, #259fac);
        }

        #subject-div {
            width: auto !important;
        }

        .button {
            display: inline-block;
            border-radius: 7px;
            border: none;
            background: #1875FF;
            color: white;
            font-family: inherit;
            text-align: center;
            font-size: 13px;
            box-shadow: 0px 14px 56px -11px #1875FF;
            width: 15em;
            padding: 1em;
            transition: all 0.4s;
            cursor: pointer;

            margin-top: 30px;
        }

        .button span {
            cursor: pointer;
            display: inline-block;
            position: relative;
            transition: 0.4s;
        }

        .button span:after {
            content: ' for miao';
            position: absolute;
            opacity: 0;
            top: 0;
            right: -20px;
            transition: 0.7s;
        }

        .button:hover span {
            padding-right: 3.55em;
        }

        .button:hover span:after {
            opacity: 4;
            right: 0;
        }

        .disable {
            pointer-events: none;
        }

        .col-md-6{
            margin-top: 20px;
        }

    </style>
</head>

<body>
<div id="workspace-div">
    <div id="circle-org"></div>

    <div id="subject-div" class="glass glass-light" style="width: 420px;">
        <div class="bar"></div>
        <form>
            <div class="card">

                <div class="form-group">
                    <div class="col-md-6">
                        <label for="firstName">姓氏</label>
                        <input type="text" id="firstName" name="firstName" placeholder="姓氏" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <label for="lastName">名字</label>
                        <input type="text" id="lastName" name="lastName" placeholder="名字" class="form-control">
                    </div>

                </div>

                <div class="form-group" >
                    <div class="col-md-6">

                        <label for="cardType">证件类型</label>
                        <select id="cardType" name="type" class="form-control">
                            <option value="身份证">身份证</option>
                            <option value="护照">护照</option>
                        </select>
                    </div>

                    <div class="col-md-6">

                        <label for="cardNum">证件号</label>
                        <input type="text" id="cardNum" placeholder="请输入证件号码" class="form-control">
                    </div>
                </div>

                <div class="form-group">

                    <div class="col-md-6">
                        <label for="birth">生日</label>
                        <input id="birth" placeholder="生日" class="form-control" disabled>
                    </div>

                    <div class="col-md-6">

                        <label for="sex">性别</label>
                        <input id="sex" placeholder="性别" class="form-control" disabled>
                    </div>
                </div>


                <div class="form-group">

                    <div class="col-md-6">
                        <label for="email">邮箱</label>
                        <input id="email" placeholder="邮箱" class="form-control" type="email">
                    </div>

                    <div class="col-md-6">

                        <label for="psw">密码</label>
                        <input id="psw" placeholder="密码" class="form-control" type="password">
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-md-6">
                        <label for="phone">手机号</label>
                        <input type="text" id="phone" placeholder="请输入手机号" class="form-control">


                    </div>

<!--                    <div class="col-md-6">-->
<!--                        <label for="yz">验证码</label>-->
<!--                        <div class="input-group">-->
<!--                            <input type="text" id="yz" placeholder="" class="form-control">-->
<!--                            <div id="codeButton" class="input-group-addon">获取验证码</div>-->
<!--                        </div>-->

<!--                    </div>-->

                </div>

                <div class="form-group" style="margin-top: 50px">
                    <center>
                        <label for="res"></label>
                        <button id="res" class="button" style="vertical-align:middle" type="button"><span>注册</span></button>
                    </center>
                </div>
            </div>
        </form>
    </div>

    <div id="circle-blue"></div>
</div>

<script>
    $(function () {


        var pathName=window.document.location.pathname;
        var curWwwPath=window.document.location.href;
        var pos=curWwwPath.indexOf(pathName);
        var prefixUrl=curWwwPath.substring(0,pos);
        console.log("prefixUrl:"+prefixUrl);

        var suo = 0;

        $("#res").click(function () {
            console.log("点击注册");
            var firstName = $("#firstName").val();
            var lastName = $("#lastName").val();
            var cardType = $("#cardType").val();
            var cardNum = $("#cardNum").val();
            var birth = $("#birth").val();
            var sex = $("#sex").val();
            var phone = $("#phone").val();
            var psw= $("#psw").val();
            var email= $("#email").val();
            if (phone === ""
                || $("#yz") === ""
                || firstName === ""
                || lastName === ""
                || cardType === ""
                || cardNum === ""
                || birth === ""
                || sex === ""
                || psw === ""
                || email === "") {
                alert("请填写完整");
            } else {
                console.log("注册");
                $.ajax({
                    url: prefixUrl+"/resign",
                    type: "POST",
                    data: {
                        "firstName": firstName,
                        "lastName": lastName,
                        "type": cardType,
                        "num": cardNum,
                        "birth": birth,
                        "sex": sex,
                        "phone": phone,
                        "password":psw,
                        "email":email
                    },
                    dataType: "json",
                    success: function (data) {
                        console.log("登录返回信息为：");
                        console.log(data);
                        if(data.success){
                            location.href="login.html";
                        }else{
                            alert("注册失败"+data.msg);
                        }
                    }
                });
            }


        })

        $('#phone').on('input propertychange', function () {//监听文本框
            console.log("监听文本框");
            if (suo === 0) {
                if ($("#phone").val() === "") {
                    $("#codeButton").addClass("disable");
                } else {
                    $("#codeButton").removeClass("disable");
                }
            } else {
                $("#codeButton").addClass("disable");
            }
            // console.log($('#tit').val());

        });

        $('#codeButton').click(function () {
            console.log("验证码按钮");
            if ($("#phone").val() === "") {
                alert("请填写手机号");
            } else {
                suo = 1;
                console.log("获取验证码");
                var count = 60;
                var countdown = setInterval(CountDown, 1000);

                function CountDown() {
                    $('#codeButton').attr("disable", true).html(" " + count + " s").addClass("disable");
                    if (count === 0) {
                        $("#codeButton").html("获取验证码").removeAttr("disable").removeClass("disable");
                        clearInterval(countdown);
                        suo = 0;
                    }
                    count--;
                }
            }
        })


        $('#cardNum').keyup(function () {
            console.log("身份证");
            var code = $(this).val();
            if (code.length === 18) {

                var ele = $("#cardNum").val();
                var birth = ele.substring(6, 10) + "-" + ele.substring(10, 12) + "-" + ele.substring(12, 14);
                console.log(birth);
                $("#birth").val(birth);
                var sex = "";
                if (parseInt(ele.substr(16, 1)) % 2 === 1) {
                    sex = "男";
                } else {
                    sex = "女";
                }
                console.log(sex);
                $("#sex").val(sex);
                //获取年龄
                var myDate = new Date();
                var month = myDate.getMonth() + 1;
                var day = myDate.getDate();
                var age = myDate.getFullYear() - ele.substring(6, 10) - 1;
                if (ele.substring(10, 12) < month || ele.substring(10, 12) === month && ele.substring(12, 14) <= day) {
                    age++;
                }
                console.log(age);
            }

        });

    })


</script>
</body>

</html>